<template>
  <div class="log-list-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="page-title">
        <div class="title-with-back">
          <el-button type="primary" :icon="ArrowLeft" @click="goBack" class="blue-return-button" circle />
          <div class="title-content">
            <div class="title-main">
              <el-icon class="title-icon"><Document /></el-icon>
              <h2>Flink Job 日志列表</h2>
            </div>
            <p class="page-description">
              <el-icon><DataAnalysis /></el-icon>
              <span>查询和浏览所有 Flink Job 运行日志，支持多条件筛选和详情查看</span>
            </p>
          </div>
        </div>
      </div>
      
      <div class="page-stats">
        <div class="stat-card total">
          <div class="stat-icon"><el-icon><Menu /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ total }}</div>
            <div class="stat-label">查询结果</div>
          </div>
        </div>
        <div class="stat-card error">
          <div class="stat-icon"><el-icon><CircleClose /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ errorCount }}</div>
            <div class="stat-label">错误</div>
          </div>
        </div>
        <div class="stat-card warn">
          <div class="stat-icon"><el-icon><Warning /></el-icon></div>
          <div class="stat-content">
            <div class="stat-number">{{ warnCount }}</div>
            <div class="stat-label">警告</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>
        
        <el-form :model="filterForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="日志级别">
                <el-select v-model="filterForm.logLevel" placeholder="选择级别" clearable style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="ERROR" value="ERROR" />
                  <el-option label="WARN" value="WARN" />
                  <el-option label="EXCEPTION" value="EXCEPTION" />
                  <el-option label="INFO" value="INFO" />
                </el-select>
              </el-form-item>
              <el-form-item label="类名">
                <el-input v-model="filterForm.className" placeholder="支持模糊查询" clearable style="width: 200px" />
              </el-form-item>
              <el-form-item label="消息内容">
                <el-input v-model="filterForm.message" placeholder="支持模糊查询" clearable style="width: 250px" />
              </el-form-item>
            </div>
            
            <div class="search-form-actions">
              <el-button @click="filterExpanded = !filterExpanded">
                <el-icon><component :is="filterExpanded ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
                {{ filterExpanded ? '收起筛选' : '高级筛选' }}
              </el-button>
              <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
              <el-button type="warning" @click="handleReset" :icon="Refresh">重置</el-button>
            </div>
          </div>

          <transition name="filter-expand">
            <div v-show="filterExpanded" class="search-form-expanded">
              <div class="search-form-fields">
                <el-form-item label="时间范围">
                  <el-date-picker 
                    v-model="filterForm.timeRange" 
                    type="datetimerange" 
                    range-separator="至" 
                    start-placeholder="开始时间" 
                    end-placeholder="结束时间" 
                    :shortcuts="dateShortcuts"
                    format="YYYY-MM-DD HH:mm:ss" 
                    value-format="YYYY-MM-DD HH:mm:ss" 
                    style="width: 400px"
                    :teleported="true"
                    popper-class="datetime-picker-popper"
                    :clearable="true" />
                </el-form-item>
              </div>
            </div>
          </transition>
        </el-form>
      </el-card>
    </div>

    <!-- 日志列表 -->
    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>日志列表</span>
            </div>
            <div class="table-header-actions">
              <el-button type="success" @click="handleRefresh" :icon="Refresh" :loading="loading" size="small">刷新</el-button>
              <div class="table-info">
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ logList.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ pagination.page }}/{{ Math.ceil(total / pagination.pageSize) || 1 }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }"><ArrowDown /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>
        
        <div class="table-container">
          <el-table v-loading="loading" :data="logList" :default-sort="{ prop: 'log_timestamp', order: 'descending' }"
            @sort-change="handleSortChange" style="width: 100%;" :height="600" class="enhanced-table">
            <el-table-column prop="log_timestamp" label="时间" width="200" fixed="left" sortable="custom" 
              :sort-orders="['descending', 'ascending', null]">
              <template #default="{ row }">
                <div class="copyable-cell time-cell">
                  <span class="time-display">{{ row.log_timestamp }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.log_timestamp, '时间')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="log_level" label="级别" width="80" align="center">
              <template #default="{ row }">
                <el-tag size="small" :type="getLevelType(row.log_level)">{{ row.log_level }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="logger_name" label="类名" width="220" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="copyable-cell">
                  <span class="ellipsis" :title="row.logger_name">{{ row.logger_name }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.logger_name, '类名')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="class_path" label="类路径" width="280" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="copyable-cell">
                  <span class="ellipsis" :title="row.class_path">{{ row.class_path }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.class_path, '类路径')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="message" label="消息" min-width="300" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="copyable-cell">
                  <span class="ellipsis" :title="row.message">{{ row.message }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.message, '消息')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="log_file_path" label="日志文件" width="250" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="copyable-cell">
                  <span class="ellipsis" :title="row.log_file_path">{{ row.log_file_path }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.log_file_path, '日志文件')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="host_ip" label="主机IP" width="140" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="copyable-cell">
                  <span :title="row.host_ip">{{ row.host_ip }}</span>
                  <el-icon class="copy-icon" @click.stop="copyText(row.host_ip, '主机IP')"><DocumentCopy /></el-icon>
                </div>
              </template>
            </el-table-column>

            <!-- 操作列固定 -->
            <el-table-column label="操作" width="80" fixed="right">
              <template #default="{ row }">
                <div class="action-buttons">
                  <el-tooltip content="查看详情" placement="top">
                    <el-button 
                      type="primary"
                      size="small" 
                      @click="viewDetail(row)" 
                      circle
                    >
                      <el-icon><View /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-show="paginationExpanded" class="pagination">
          <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.pageSize"
            :page-sizes="[20, 50, 100, 200]" :total="total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handlePageChange" class="enhanced-pagination" />
        </div>
      </el-card>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" width="900px" :close-on-click-modal="false" top="5vh" class="unified-dialog">
      <template #header>
        <div class="dialog-header">
          <div class="header-icon header-icon-primary"><el-icon><Document /></el-icon></div>
          <div class="header-content">
            <h3>日志详情</h3>
            <p>查看 Flink Job 日志的详细信息</p>
          </div>
        </div>
      </template>
      
      <div v-if="selectedLog" class="dialog-content">
        <el-descriptions :column="2" border size="default">
          <el-descriptions-item label="时间">{{ selectedLog.log_timestamp }}</el-descriptions-item>
          <el-descriptions-item label="级别">
            <el-tag size="small" :type="getLevelType(selectedLog.log_level)">{{ selectedLog.log_level }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="Job名称">{{ selectedLog.job_name }}</el-descriptions-item>
          <el-descriptions-item label="环境">
            <el-tag size="small" :type="getEnvType(selectedLog.env)">{{ selectedLog.env || '-' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="组件">{{ selectedLog.component || '-' }}</el-descriptions-item>
          <el-descriptions-item label="集群">{{ selectedLog.cluster || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类名" :span="2">{{ selectedLog.logger_name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="类路径" :span="2">{{ selectedLog.class_path || '-' }}</el-descriptions-item>
          <el-descriptions-item label="主机名">{{ selectedLog.host_name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="主机IP">{{ selectedLog.host_ip || '-' }}</el-descriptions-item>
          <el-descriptions-item label="日志类型">{{ selectedLog.log_type || '-' }}</el-descriptions-item>
          <el-descriptions-item label="日志ID">
            <div class="detail-trace">
              <span>{{ selectedLog.log_id || '-' }}</span>
              <el-button 
                v-if="selectedLog.log_id"
                size="small" 
                text 
                type="primary"
                @click="copyToClipboard(selectedLog.log_id, '日志ID')"
                :icon="CopyDocument"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="错误类型" :span="2" v-if="selectedLog.exception_class">{{ selectedLog.exception_class }}</el-descriptions-item>
          <el-descriptions-item label="日志文件" :span="2" v-if="selectedLog.log_file_path">
            <div class="detail-trace">
              <span>{{ selectedLog.log_file_path }}</span>
              <el-button 
                size="small" 
                text 
                type="primary"
                @click="copyToClipboard(selectedLog.log_file_path, '日志文件路径')"
                :icon="CopyDocument"
              >
                复制
              </el-button>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="消息内容" :span="2">
            <div class="detail-message-container">
              <el-button 
                v-if="selectedLog.message"
                size="small" 
                text 
                type="primary"
                @click="copyToClipboard(selectedLog.message, '消息内容')"
                :icon="CopyDocument"
                style="float: right;"
              >
                复制
              </el-button>
              <div class="detail-message">{{ selectedLog.message || '-' }}</div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="完整日志" :span="2" v-if="selectedLog.full_message">
            <div class="detail-message-container">
              <el-button 
                size="small" 
                text 
                type="primary"
                @click="copyToClipboard(selectedLog.full_message, '完整日志')"
                :icon="CopyDocument"
                style="float: right;"
              >
                复制
              </el-button>
              <div class="detail-message">{{ selectedLog.full_message }}</div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Refresh, Search, Document, DataAnalysis, View, Menu, CircleClose, Warning, InfoFilled, List, ArrowDown, ArrowUp, DocumentCopy, CopyDocument } from '@element-plus/icons-vue'
import api from '@/utils/api'
import { componentLogger } from '@/utils/logger'
import { copyToClipboard as copyTextUtil } from '@/utils/clipboard'

const router = useRouter()
const loading = ref(false)
const logList = ref([])
const total = ref(0)
const detailDialogVisible = ref(false)
const selectedLog = ref(null)
const filterExpanded = ref(false)
const paginationExpanded = ref(false)

const pagination = reactive({ page: 1, pageSize: 50 })

const filterForm = reactive({
  timeRange: [],
  logLevel: '',
  className: '',
  message: ''
})

const sortField = ref('log_timestamp')
const sortOrder = ref('desc')

const dateShortcuts = [
  { text: '最近1小时', value: () => { const end = new Date(); const start = new Date(); start.setHours(start.getHours() - 1); return [start, end] }},
  { text: '最近6小时', value: () => { const end = new Date(); const start = new Date(); start.setHours(start.getHours() - 6); return [start, end] }},
  { text: '今天', value: () => { const end = new Date(); const start = new Date(); start.setHours(0, 0, 0, 0); return [start, end] }},
  { text: '最近7天', value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end] }}
]

const globalStats = ref({ error_count: 0, warn_count: 0, info_count: 0 })
const errorCount = computed(() => globalStats.value.error_count)
const warnCount = computed(() => globalStats.value.warn_count)
const infoCount = computed(() => globalStats.value.info_count)

// 设置默认时间范围：今天0点到当前时刻
const setDefaultTimeRange = () => {
  const now = new Date()
  const startOfToday = new Date()
  startOfToday.setHours(0, 0, 0, 0)
  
  // 格式化为 YYYY-MM-DD HH:mm:ss
  const formatDateTime = (date) => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  
  filterForm.timeRange = [formatDateTime(startOfToday), formatDateTime(now)]
}

const fetchLogs = async () => {
  try {
    loading.value = true
    const filters = {}
    if (filterForm.timeRange && filterForm.timeRange.length === 2) {
      filters.start_time = filterForm.timeRange[0]
      filters.end_time = filterForm.timeRange[1]
    }
    if (filterForm.logLevel) filters.log_level = filterForm.logLevel
    if (filterForm.className) filters.class_name = filterForm.className
    if (filterForm.message) filters.message = filterForm.message
    
    const response = await api.get('/logs/flink-job/logs', {
      params: { ...filters, page: pagination.page, page_size: pagination.pageSize, sort: sortField.value, order: sortOrder.value }
    })
    
    if (response.data && response.data.success) {
      logList.value = response.data.data.logs
      total.value = response.data.data.total
      if (response.data.data.stats) {
        globalStats.value = response.data.data.stats
      }
    }
  } catch (error) {
    ElMessage.error('获取日志列表失败: ' + (error.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

const handleSearch = () => { pagination.page = 1; fetchLogs() }
const handleReset = () => { 
  setDefaultTimeRange() // 重置到今天0点到当前时刻
  filterForm.logLevel = ''
  filterForm.className = ''
  filterForm.message = ''
  pagination.page = 1
  fetchLogs()
}
const handleRefresh = () => {
  // 如果有时间范围，更新结束时间到当前时刻
  if (filterForm.timeRange && filterForm.timeRange.length === 2) {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')
    filterForm.timeRange[1] = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  fetchLogs()
}
const handlePageChange = (page) => { pagination.page = page; fetchLogs() }
const handleSizeChange = (size) => { pagination.pageSize = size; pagination.page = 1; fetchLogs() }
const goBack = () => router.back()
const viewDetail = (row) => { selectedLog.value = row; detailDialogVisible.value = true }

const getLevelType = (level) => {
  const types = { 'ERROR': 'danger', 'WARN': 'warning', 'EXCEPTION': 'danger', 'INFO': 'info' }
  return types[level] || ''
}

const getEnvType = (env) => {
  const types = { 'production': 'danger', 'test': 'warning', 'dev': 'info' }
  return types[env] || ''
}

const handleSortChange = ({ prop, order }) => {
  if (!prop || !order) {
    sortField.value = 'log_timestamp'
    sortOrder.value = 'desc'
  } else {
    sortField.value = prop
    sortOrder.value = order === 'ascending' ? 'asc' : 'desc'
  }
  fetchLogs()
}

// 复制文本到剪贴板 - 使用统一工具
const copyText = async (text, fieldName) => {
  await copyTextUtil(text, fieldName)
}

// 复制内容到剪贴板
const copyToClipboard = async (text, fieldName) => {
  await copyTextUtil(text, fieldName)
}

onMounted(() => {
  setDefaultTimeRange() // 设置默认时间范围
  fetchLogs()
})
</script>

<style scoped>
.log-list-container { padding: 0; min-height: calc(100vh - 60px); }
.title-with-back { display: flex; align-items: flex-start; gap: 15px; }
.blue-return-button { background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%); border: none; border-radius: 8px; padding: 8px 16px; font-weight: 500; box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); transition: all 0.3s ease; flex-shrink: 0; margin-top: 2px; }
.blue-return-button:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4); background: linear-gradient(135deg, #66b3ff 0%, #409eff 100%); }
.title-content { display: flex; flex-direction: column; gap: 8px; }
.page-header { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 20px 24px; border-radius: 12px; overflow: hidden; color: #303133; min-height: 120px; border: 1px solid #e4e7ed; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.page-title { position: relative; z-index: 1; display: flex; gap: 12px; flex: 1; }
.title-main { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.title-main h2 { font-size: 20px; font-weight: 600; color: #303133; margin: 0; }
.page-description { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #606266; margin: 0; }
.page-stats { position: relative; z-index: 1; display: flex; gap: 20px; }
.stat-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-radius: 8px; border: 1px solid #e4e7ed; transition: all 0.3s; min-width: 120px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: #409eff; }
.stat-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; font-size: 16px; }
.stat-card.total .stat-icon { background: rgba(144, 147, 153, 0.1); color: #909399; }
.stat-card.error .stat-icon { background: rgba(245, 108, 108, 0.1); color: #f56c6c; }
.stat-card.warn .stat-icon { background: rgba(230, 162, 60, 0.1); color: #e6a23c; }
.stat-card.info .stat-icon { background: rgba(64, 158, 255, 0.1); color: #409eff; }
.stat-content { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-size: 20px; font-weight: 700; color: #303133; line-height: 1; }
.stat-label { font-size: 12px; color: #909399; font-weight: 500; }
.search-section { margin-bottom: 24px; }
.search-card { border-radius: 16px; border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.search-header { display: flex; justify-content: space-between; align-items: center; }
.search-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #303133; }
.search-form-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.search-form-fields { display: flex; gap: 16px; flex: 1; }
.search-form-actions { display: flex; gap: 8px; align-items: center; }
.search-form-expanded { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e7ed; }
.filter-expand-enter-active, .filter-expand-leave-active { transition: all 0.3s ease; overflow: hidden; }
.filter-expand-enter-from, .filter-expand-leave-to { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; }
.table-section { margin-bottom: 24px; }
.table-card { border-radius: 16px; border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.table-header { display: flex; justify-content: space-between; align-items: center; }
.table-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #303133; }
.table-header-actions { display: flex; align-items: center; gap: 12px; }
.pagination-control-wrapper { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(64, 158, 255, 0.08); border: 1px solid rgba(64, 158, 255, 0.2); border-radius: 4px; cursor: pointer; transition: all 0.3s; font-size: 12px; height: 24px; }
.pagination-control-wrapper:hover { background: rgba(64, 158, 255, 0.12); }
.page-count { font-size: 12px; font-weight: 500; color: #909399; }
.divider { width: 1px; height: 12px; background: rgba(64, 158, 255, 0.3); }
.pagination-info { font-size: 12px; font-weight: 500; color: #409eff; }
.pagination-icon { font-size: 14px; color: #409eff; transition: transform 0.3s; }
.pagination-icon.expanded { transform: rotate(180deg); }
/* 分页容器 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.detail-message { word-break: break-all; white-space: pre-wrap; line-height: 1.8; max-height: 300px; overflow-y: auto; padding: 8px; background-color: #f8f9fa; border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; }
.stack-trace { word-break: break-all; white-space: pre-wrap; line-height: 1.6; max-height: 400px; overflow-y: auto; padding: 12px; background-color: #f5f7fa; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; margin: 0; }

/* 复制功能样式 */
.copyable-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.copyable-cell span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copyable-cell span.ellipsis { display: block; }

/* 时间列特殊样式 - 完整显示不换行 */
.copyable-cell.time-cell { 
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.copyable-cell.time-cell span.time-display { 
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
  font-size: 13px;
  font-weight: 500;
  color: #303133;
}

.copy-icon { font-size: 14px; color: #909399; cursor: pointer; transition: all 0.3s; opacity: 0; flex-shrink: 0; }
.copyable-cell:hover .copy-icon { opacity: 1; }
.copy-icon:hover { color: #409eff; transform: scale(1.15); }
.copy-icon:active { transform: scale(0.95); }
/* 操作按钮样式 - 统一风格 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 60px;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}
</style>

<style>
/* 时间选择器弹出层优化（全局样式，不使用scoped） */
.datetime-picker-popper {
  z-index: 3000 !important;
}

.datetime-picker-popper .el-picker-panel__body {
  min-height: 380px;
}

.datetime-picker-popper .el-date-range-picker__time-header {
  position: relative;
  z-index: 1;
}

.datetime-picker-popper .el-picker-panel__content {
  margin: 0;
}

/* 确保时间选择面板不被日期面板遮挡 */
.datetime-picker-popper .el-time-panel {
  position: absolute;
  z-index: 2 !important;
  background: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 优化日期时间范围选择器的布局 */
.datetime-picker-popper.el-popper {
  transform-origin: center top !important;
}

/* 表格单元格悬停提示优化 */
.el-table .cell {
  position: relative;
}

.el-table .el-tooltip__trigger {
  width: 100%;
}

/* 详情弹窗复制功能样式 */
.detail-trace {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-trace span {
  flex: 1;
  word-break: break-all;
}

.detail-message-container {
  position: relative;
}
</style>

